<template>
  <avue-crud
    ref="crud"
    :data="data"
    :option="option"
    :before-open="beforeOpen"
    :before-close="beforeClose"
    @search-change="searchChange"
    @search-reset="resetChange"
    @row-del="rowDel"></avue-crud>
</template>

<script>
export default {
  name: 'TestAvueCrud',
  data() {
    return {
      data: [
        {
          name: '张三',
          sex: '1',
          datetime: '2025-02-21',
          address: '宁波银行宁波银行宁波银行宁波银行宁波银行宁波银行',
          address1: '宁波银行1宁波银行1宁波银行1宁波银行1宁波银行1宁波银行1',
          address2: '宁波银行2宁波银行2宁波银行2宁波银行2宁波银行2宁波银行2'
        },
        {
          name: '李四',
          sex: '2',
          datetime: '2025-02-22',
          address: '宁波银行2',
          address1: '宁波银行1',
          address2: '宁波银行1'
        },
        {
          name: '王五',
          sex: '1',
          datetime: '2025-02-23',
          address: '宁波银行3',
          address1: '宁波银行1',
          address2: '宁波银行1'
        }
      ],
      option: {
        dialogClickModal: true,
        align: 'left',
        headerAlign: 'left',
        height: 541,
        border: true,
        stripe: true,
        menuWidth: 80,
        menuType: 'menu',
        menuBtnTitle: '●●●',
        searchIndex: 3,
        refreshBtn: false,
        searchShowBtn: false,
        gridBtn: false,
        searchBtnIcon: ' ',
        searchBtnText: '查询',
        emptyBtnIcon: ' ',
        emptyBtnText: '重置',
        labelWidth: 120,
        searchLabelWidth: 120,
        searchIcon: true,
        addBtnText: '这是新增按钮哦',
        addTitle: '新增标题哦',
        showHeader: true, // 是否显示表格的表头
        addBtn: true,
        editBtn: true,
        viewBtn: true,
        delBtn: true,
        column: [
          {
            label: '姓名',
            prop: 'name',
            fixed: true,
            search: true,
            overHidden: true,
            minWidth: 300
          },
          {
            label: '性别',
            prop: 'sex',
            type: 'select',
            search: true,
            overHidden: true,
            minWidth: 300,
            dicData: [
              {
                label: '男',
                value: '1'
              },
              {
                label: '女',
                value: '2'
              }
            ]
          },
          {
            label: '日期',
            prop: 'datetime',
            type: 'date',
            search: true,
            overHidden: true,
            format: 'yyyy-MM-dd', // 搜索框的日期显示格式，若没有formatter，表格的内容也会是这个格式
            valueFormat: 'yyyy-MM-dd', // 搜索条件的入参值
            html: true,
            formatter: (row, value, formatValue, column) => {
              console.log(row, value, formatValue, column);
              return value;
            },
            minWidth: 300
          },
          {
            label: '地址',
            prop: 'address',
            search: true,
            overHidden: true,
            minWidth: 600
          },
          {
            label: '住址1',
            prop: 'address1',
            overHidden: true,
            minWidth: 100
          },
          {
            label: '住址2',
            prop: 'address2',
            overHidden: true,
            minWidth: 100
          }
        ]
      }
    };
  },
  mounted() {
    // 列显隐弹窗只显示"显隐"和"排序"
    // let dialogColumnRef = this.$refs.crud.$refs.dialogColumn;
    // dialogColumnRef.defaultColumn.splice(1, 2);
  },
  methods: {
    beforeOpen(done, type) {
      console.log(type);
      done();
    },
    beforeClose(done, type) {
      console.log(type);
      done();
    },
    searchChange(params, done) {
      console.log(params);
      done();
    },
    resetChange(...args) {
      console.log(args);
    },
    rowDel() {
      this.$confirm('请确认是否删除这条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped></style>
